<template>
	<div class="app-container" :loading="showContentLoading">
		<div class="gantt-chart-container">
			<header ref="box1">
				<div class="flex-between-center header-row">
					<div class="flex-start-center item-gap">
						<el-dropdown trigger="click" class="item-gap" size="mini" @command="onArrowLeft">
							<el-button type="primary" icon="el-icon-arrow-left" size="mini">{{ dateFrom }}</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="1">前移一天</el-dropdown-item>
								<el-dropdown-item command="7">前移一周</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<div>
							<el-button class="item-gap" type="primary" size="mini" @click="onArrowNow">今天</el-button>
						</div>
						<el-dropdown trigger="click" size="mini" @command="onArrowRight">
							<el-button type="primary" size="mini">
								<span>{{ dateTo }}</span>
								<span class="el-icon-arrow-right"></span>
							</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="1">后移一天</el-dropdown-item>
								<el-dropdown-item command="7">后移一周</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
					<div class="flex-end-center">
						<div class="flex-start-center">
							<el-radio-group v-model="tableHeaderSwitchType" size="mini" class="item-gap">
								<el-radio-button label="date">日</el-radio-button>
								<el-radio-button label="week">周</el-radio-button>
							</el-radio-group>
						</div>
						<el-select v-model="searchParams.workshopId" clearable size="mini" placeholder="区域" class="item-gap search-bar-item-size1" @change="onSearchBtn">
							<el-option
								v-for="item in workshopList"
								:key="item.id"
								:label="item.name"
								:value="item.id"
							/>
						</el-select>
						<el-select v-model="searchParams.auditState" placeholder="状态" clearable size="mini" class="search-bar-item-size1 item-gap" @clear="onSearchBtn" @change="onSearchBtn">
							<el-option v-for="item in auditStateList" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
						<jk-search-input v-model="code" show-search class="search-bar-item-size3" size="mini" placeholder="计划单号" @on-search="onSearchBtn" @keyup.enter.native="onSearchBtn" />
					</div>
				</div>
				<div class="flex-between-center header-row" style="border-bottom: none;">

				</div>
			</header>
			<div style="width: 100%;height: 1px;background: #e8eaec;margin: 4px 0;"></div>
			<section>
				<gantt-table
					:table-loading="tableLoading"
					:height="tableHeight + 50"
					:table-header-switch-type="tableHeaderSwitchType"
					:table-option="{
						dateFrom: dateFrom,
						dateTo: dateTo,
						rowList: tableData,
						startDateKeyName: 'deliveryDateFrom',
						endDateKeyName: 'deliveryDateTo',
					}"
				></gantt-table>
			</section>
			<footer ref="box2" class="flex-end-center margin-top-10">
				<jk-page
					:page-index="searchParams.pageNo"
					:page-sizes="searchParams.pageSizes"
					:page-size="searchParams.pageSize"
					:total="searchParams.count"
					location="dialog"
					@on-change="onPageChange"
				/>
			</footer>
		</div>
	</div>
</template>
<script>
    import ganttTable from './components/gantt-table.vue';
    import { formatDate, pageConfig, throttle } from '../../../utils/jk/jk-tool';
    import { mathJsDiv } from '../../../utils/jk/jk-cals';
    import calHeight from '../../../mixins/cal-table-height';
    import handlerCache from '../../../mixins/handler-cache';
    export default {
        mixins: [calHeight, handlerCache],
        components: { ganttTable },
        data() {
            return {
                tableLoading: false,
                dateTo: '',
                tableData: [],
                dateFrom: '',
                currentTime: '',
                code: '',
                startDate: '',
                endDate: '',
                workshopList: [],
                tableHeaderSwitchType: 'date',
                showContentLoading: false,
                searchParams: {
                    count: 0,
                    pageNo: pageConfig.pageNo,
                    pageSize: pageConfig.pageSize,
                    code: '',
                    auditState: null,
                    workshopId: null
                },
                auditStateList: [
                    { id: 1, name: '创建' },
                    { id: 2, name: '已下达' },
                    { id: 3, name: '生产中' },
                    { id: 4, name: '已完成' },
                    { id: 5, name: '已关闭' }
                ]
            };
        },
        methods: {
            clearCacheMethod() {
                // Object.assign(this.$data, this.$options.data());
                this.$nextTick(() => {
                    this.getDependentData();
                });
            },
            onSearchBtn() {
                this.$set(this.searchParams, 'pageNo', 1);
                this.getListRequest();
            },
            onPageChange(e, size) {
                this.$set(this.searchParams, 'pageNo', e);
                this.$set(this.searchParams, 'pageSize', size);
                this.getListRequest();
            },
            getListRequest() {
                if (this.dateTo && Date.parse(this.dateFrom) < Date.parse(this.dateTo)) {
                    this.tableLoading = true;
                    /* return api(this.searchParams).then(res => {
                        this.showContentLoading = false;
                        this.tableLoading = false;
                        if (res.data.status === 200) {
                            this.searchParams.count = res.data.count;
                            this.tableData = res.data.res.map(x => {
                                if (x.order) {
                                    x.productName = x.order.productName;
                                    x.orderQty = x.order.orderQty;
                                    x.productOrderCode = x.order.code;
                                    x.batchCode = x.order.batchCode;
                                }
                                return x;
                            });
                        }
                    });*/
                } else {
                    this.$tipsBar(this, 'custom', 'warning', '结束日期必须大于开始日期！');
                }
            },
            // 左调日期
            onArrowLeft(command) {
                // throttle(() => {
                this.dateFrom = formatDate(Date.parse(formatDate(this.dateFrom)) - 24 * 60 * 60 * 1000 * command);
                this.getListRequest();
                // }, 100);
            },
            // 今天
            onArrowNow() {
                // throttle(() => {
                this.dateFrom = formatDate(Date.parse(formatDate(this.currentTime)));
                this.getListRequest();
                // }, 100);
            },
            // 右调日期
            onArrowRight(command) {
                // throttle(() => {
                this.dateTo = formatDate(Date.parse(formatDate(this.dateTo)) + 24 * 60 * 60 * 1000 * command);
                this.getListRequest();
                // }, 100);
            },
            getCurrentTime() {
                this.currentTime = Date.now();
                this.dateFrom = formatDate(Date.now());
                const d = new Date();
                let year = d.getFullYear();
                let mm = d.getMonth() + 1;
                for (let i = 0; i < 2; i++) {
                    if (mm === 12) {
                        year += 1;
                        mm = 1;
                    } else {
                        mm++;
                    }
                }
                const mon = mm < 10 ? `0${mm}` : mm;
                let day = d.getDate() < 10 ? `0${d.getDate()}` : d.getDate();
                const lastDay = new Date(year, mon, 0).getDate();
                if (day > lastDay) {
                    day = lastDay;
                }
                const dateStr = `${year}-${mon}-${day}`;
                this.dateFrom = formatDate(Date.now());
                this.dateTo = dateStr;
            },
            async getDependentData() {
                this.showContentLoading = true;
                this.workshopList = this.$store.state.user.userWorkshop.workshopList;
                this.$set(this.searchParams, 'workshopId', this.$store.state.user.userWorkshop.defaultWorkshopId);
                this.getCurrentTime();
                await this.getListRequest();
                this.showContentLoading = false;
            }

        },
        mounted() {
            this.getDependentData();
        }
    };
</script>
<style scoped lang="scss">
    .header-row {
        //padding: 2px 0;
        //border-bottom: solid 1px #dcdee2;
    }
    .gantt-chart-container {
        //padding-top: 16px;
        background: #fff;
        box-shadow: 0 0 0 40px #fff;
    }
</style>
